<template>
  <!--数字资产-->
  <div class="mod-out-home">
    <page-header></page-header>
    <div class="max_screen_body">
      <div class="max_screen_body_left">
        <div class="screen_card screen_card1">
          <card-header :title="'积分制宣传片'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body videoBox">
            <Videos v-if="screenData" :video-url="'https://' + screenData.integralPublicize" :autoplay="false"
                    :loop="true" :video-cover="'https://' + screenData.integralPublicizeCover" zoom="fill"/>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'月度村民考核问题类别占比'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body">
            <echarts :set-option="opt3" id="myEcharts3"></echarts>
          </div>
        </div>
      </div>
      <div class="max_screen_body_center">
        <div class="screen_card screen_card1">
          <card-header :title="'积分制管理实施办法'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body">
            <div class="richText" v-if="dataArr['pointsRule']">
              <div class="richTextTitle" style="text-align: center">
                {{ dataArr['pointsRule'][0].title }}
              </div>
              <div class="richTextDesc" @click="show(dataArr['pointsRule'][0].id)" v-scroll>
                <div v-html="dataArr['pointsRule'][0].textContent"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'月度村民积分平均分'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body">
            <echarts :set-option="opt2" id="myEcharts2"></echarts>
          </div>
        </div>
      </div>
      <div class="max_screen_body_right">
        <div class="screen_card screen_card1">
          <card-header :title="'年度村民考核问题数'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body">
            <echarts :set-option="opt" id="myEcharts"></echarts>
          </div>
        </div>
        <div class="screen_card">
          <card-header :title="'村民积分公示（月度平均分）'" :path="'screen/card_header3.png'"></card-header>
          <div class="screen_card_body"></div>
        </div>
      </div>
    </div>
    <show-dialog ref="showDialogRef"></show-dialog>
  </div>
</template>
<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import Videos from "@/views/home/components/videos.vue";
import Echarts from "./components/echarts_box.vue";
import {graphic} from "echarts";
import {onBeforeMount, ref, reactive} from "vue";
import showDialog from "./components/show_dialog.vue";
import baseService from "@/service/baseService";

const opt = ref();
const opt2 = ref();
const opt3 = ref();

const dataArr = reactive({}) as any;

const showDialogRef = ref();

const show = (id: any) => {
  // loading.value = true;
  baseService.get(`/bus/busnotice/${id}`).then((res) => {
    // loading.value = false;
    showDialogRef.value.acceptParams({text: res.data.textContent});
  });
};

baseService.get("/bus/busnotice/page", {
  page: 1,
  limit: 10,
  type: "pointsRule",
  textType: 0,
  isPublish: 1
}).then((res) => {
  dataArr['pointsRule'] = res.data.list;
});

let xData = ["一月", "二月", "三月", "四月", "五月", "六月"];
let yData = [0, 1230, 425, 0, 1230, 425];
opt.value = {
  grid: {
    top: "25%",
    left: "-5%",
    bottom: "5%",
    right: "5%",
    containLabel: true
  },
  tooltip: {
    show: true
  },
  animation: false,
  xAxis: [
    {
      type: "category",
      data: xData,
      axisTick: {
        alignWithLabel: true
      },
      nameTextStyle: {
        color: "#82b0ec"
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#82b0ec"
        }
      },
      axisLabel: {
        textStyle: {
          color: "#fff"
        },
        margin: 30
      }
    }
  ],
  yAxis: [
    {
      show: false,
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#fff"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#0c2c5a"
        }
      },
      axisLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [40, 10],
      symbolOffset: [0, -6], // 上部椭圆
      symbolPosition: "end",
      z: 12,
      // "barWidth": "0",
      label: {
        normal: {
          show: true,
          position: "top",
          // "formatter": "{c}%"
          fontSize: 15,
          fontWeight: "bold",
          color: "#34DCFF"
        }
      },
      color: "#2DB1EF",
      data: yData
    },
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [40, 10],
      symbolOffset: [0, 7], // 下部椭圆
      // "barWidth": "20",
      z: 12,
      color: "#2DB1EF",
      data: yData
    },
    {
      name: "",
      type: "pictorialBar",
      symbolSize: function (d: any) {
        return d > 0 ? [50, 15] : [0, 0];
      },
      symbolOffset: [0, 12], // 下部内环
      z: 10,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: "#2EA9E5",
          borderType: "solid",
          borderWidth: 1
        }
      },
      data: yData
    },
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [70, 20],
      symbolOffset: [0, 18], // 下部外环
      z: 10,
      itemStyle: {
        normal: {
          color: "transparent",
          borderColor: "#19465D",
          borderType: "solid",
          borderWidth: 2
        }
      },
      data: yData
    },
    {
      type: "bar",
      //silent: true,
      barWidth: "40",
      barGap: "10%", // Make series be overlap
      barCateGoryGap: "10%",
      itemStyle: {
        normal: {
          color: new graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: "#38B2E6"
            },
            {
              offset: 1,
              color: "#0B3147"
            }
          ]),
          opacity: 0.8
        }
      },
      data: yData
    }
  ]
};

let category = [
  {
    name: "塍里村",
    value: 99
  },
  {
    name: "东瓦窑村",
    value: 90
  },
  {
    name: "建西村",
    value: 70
  },
  {
    name: "西瓦窑村",
    value: 80
  },
  {
    name: "元帆村",
    value: 60
  },
  {
    name: "赵庄村",
    value: 30
  }
]; // 类别
let total = 100; // 数据总数
let datas: any[] = [];
category.forEach((value) => {
  datas.push(value.value);
});
opt2.value = {
  xAxis: {
    // max: total,
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  grid: {
    left: 80,
    top: 20, // 设置条形图的边距
    right: 80,
    bottom: 20
  },
  yAxis: [
    {
      type: "category",
      inverse: false,
      data: category,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    }
  ],
  series: [
    {
      // 内
      type: "bar",
      barWidth: 18,
      legendHoverLink: false,
      silent: true,
      itemStyle: {
        normal: {
          color: function (params: any) {
            let color;
            if (params.dataIndex == 19) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#EB5118" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#F21F02" // 100% 处的颜色
                  }
                ]
              };
            } else if (params.dataIndex == 18) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFA048" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#B25E14" // 100% 处的颜色
                  }
                ]
              };
            } else if (params.dataIndex == 17) {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#F8E972" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#E5C206" // 100% 处的颜色
                  }
                ]
              };
            } else {
              color = {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1588D1" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0F4071" // 100% 处的颜色
                  }
                ]
              };
            }
            return color;
          }
        }
      },
      label: {
        normal: {
          show: true,
          position: "left",
          formatter: "{b}",
          textStyle: {
            color: "#fff",
            fontSize: 14
          }
        }
      },
      data: category,
      z: 1,
      animationEasing: "elasticOut"
    },
    {
      // 分隔
      type: "pictorialBar",
      itemStyle: {
        normal: {
          color: "#061348"
        }
      },
      symbolRepeat: "fixed",
      symbolMargin: 6,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [1, 21],
      symbolPosition: "start",
      symbolOffset: [1, -1],
      symbolBoundingData: total,
      data: category,
      z: 2,
      animationEasing: "elasticOut"
    },
    {
      // 外边框
      type: "pictorialBar",
      symbol: "rect",
      symbolBoundingData: total,
      itemStyle: {
        normal: {
          color: "none"
        }
      },
      label: {
        normal: {
          formatter: (params: any) => {
            let text;
            if (params.dataIndex == 1) {
              text = "{f|  " + params.data + "}";
            } else if (params.dataIndex == 2) {
              text = "{f|  " + params.data + "}";
            } else if (params.dataIndex == 3) {
              text = "{f|  " + params.data + "}";
            } else {
              text = "{f|  " + params.data + "}";
            }
            return text;
          },
          rich: {
            f: {
              color: "yellow"
            }
          },
          position: "right",
          distance: 0, // 向右偏移位置
          show: true
        }
      },
      data: datas,
      z: 0,
      animationEasing: "elasticOut"
    },
    {
      name: "外框",
      type: "bar",
      barGap: "-120%", // 设置外框粗细
      data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
      barWidth: 25,
      itemStyle: {
        normal: {
          color: "transparent", // 填充色
          barBorderColor: "#1C4B8E", // 边框色
          barBorderWidth: 1, // 边框宽度
          // barBorderRadius: 0, //圆角半径
          label: {
            // 标签显示位置
            show: false,
            position: "top" // insideTop 或者横向的 insideLeft
          }
        }
      },
      z: 0
    }
  ]
};

var scaleData = [
  {
    name: "工程建设",
    value: 10
  },
  {
    name: "产权交易",
    value: 10
  },
  {
    name: "土地交易",
    value: 10
  },
  {
    name: "其他交易",
    value: 10
  },
  {
    name: "土地交易",
    value: 10
  },
  {
    name: "其他交易",
    value: 10
  }
];
var rich = {
  white: {
    color: "#ddd",
    align: "center",
    padding: [3, 0]
  }
};
var placeHolderStyle = {
  normal: {
    label: {
      show: false
    },
    labelLine: {
      show: false
    },
    color: "rgba(0, 0, 0, 0)",
    borderColor: "rgba(0, 0, 0, 0)",
    borderWidth: 0
  }
};
var data = [];
var color = ["#00ffff", "#00cfff", "#006ced", "#ffe000", "#ffa800", "#ff5b00", "#ff3000"];
for (var i = 0; i < scaleData.length; i++) {
  data.push(
    {
      value: scaleData[i].value,
      name: scaleData[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    },
    {
      value: 2,
      name: "",
      itemStyle: placeHolderStyle
    }
  );
}
opt3.value = {
  tooltip: {
    show: false
  },
  legend: {
    show: false
  },
  toolbox: {
    show: false
  },
  series: [
    {
      name: "",
      type: "pie",
      clockWise: false,
      labelLine: false,
      radius: [95, 100],
      hoverAnimation: false,
      data: data
    }
  ]
};

const screenData = ref();

onBeforeMount(() => {
  baseService.get("/clc/clcbaseinfo/page", {limit: 1, page: 1, isDefault: 1}).then((res) => {
    if (res.data.list.length > 0) {
      screenData.value = res.data.list[0];
    }
  });
});
</script>
<style scoped lang="less">
.max_screen_body {
  & > div {
    flex: 1 !important;
  }

  .screen_card1 {
    margin-bottom: 2.5vh;
  }

  .screen_card_body {
    padding: 1.5vh 0.8vw !important;
    font-size: 0.8vw;
    color: #ffffff;
    line-height: 1.6;

    .richText {
      display: flex;
      flex-direction: column;
      height: 100%;

      .richTextTitle {
        font-size: 1vw;
        color: #ffffff;
        height: 1.6vh;
        line-height: 1.6vh;
        margin-bottom: 1vh;
      }

      .richTextDesc {
        height: calc(100% - 2.6vh);
        overflow: auto;
        font-size: 1vw;

        :deep(p) {
          span {
            font-size: 0.8vw !important;
            line-height: 1.6 !important;
          }

          line-height: 1.6 !important;
          font-size: 0.8vw !important;
        }

        //background: #fdfdfd;
      }
    }
  }
}

.videoBox {
  font-size: 0;
}
</style>
